@charset "utf-8";

@import "common/iconfont";
@import "common/common";

$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}


.web{
    position:absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    .content{
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        width: 100%;
//      height: 100%;
//      background: skyblue;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        .top_content{
            width: 100%;
            height: r(222px);
            margin: r(7px) auto r(1px) auto;
            position: relative;
            img{
                width: 100%;
            }
            .understand{
                position: absolute;
                left: 4%;
                bottom: 5%;
                width: r(305px);
                height: r(56px);
                background: #fff;
                padding: r(3px) 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .un_btn{
                    text-align: center;
                    width: r(242px);
                    height: r(50px);
                    line-height: r(50px);
                    font-size: 14px;
                    color: #b20000;
                    border-right: r(1px) solid #B20000;
                }
                .img_wrap_un{
                    font-size: 0;
                    width: r(21px);
                    height: r(43px);
                    img{
                        width: 100%;
                    }
                }
            }
        }
        //轮播图
        .carousel_wrap{
            width: 100%;
            height: r(355px);
            border-top: r(1px) solid #d9d9d9;
            border-bottom: r(1px) solid #d9d9d9;
        }
        .lunbo_wrap {
            position: relative;
            /*border: 1px solid firebrick;*/
            overflow: hidden;
            width: 100%;
        }
        
        .pic_box {
            height: 100%;
            /*width: 9999px;*/
            white-space: nowrap;
            font-size: 0;
            
        }
        
        .pic_box li {
            position: relative;
            height: 100%;
            /*float: left;*/
            display: inline-block;
            .text_wrap{
                position: absolute;
                bottom: 0;
                background: rgba(0,0,0,.6);
                width: 100%;
                height: r(104px);
                padding-left: r(18px);
                z-index: 98;
                p{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 16px;
                    color: #fff;
                    margin-bottom: r(20px);
                }
                .collection{
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: r(46px);
                }
                .browse{
                    display: inline-block;
                    vertical-align: middle;
                }
                .iconfont{
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: r(6px);
                    font-size: 12px;
                    color: #fff;
                }
                span{
                    font-size: 12px;
                    color: #fff;
                    display: inline-block;
                    vertical-align: middle;
                }
                .day_wrap{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 12px;
                    color: #FFFFFF;
                    margin-right: r(21px);
                    &>p{
                        font-size: 12px;
                        line-height: r(24px);
                        span{
                            font-size: 12px;
                            line-height: r(24px);
                        }
                    }
                    &::after{
                        content: "";
                        clear: both;
                        display: block;
                    }
                }
            }
        }
        
        .pic_box li img {
            width: 100%;
            display: block;
        }
        
        .pannel {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 1%;
            text-align: center;
            z-index: 99;
        }
        
        .pannel li {
            display: inline-block;
            width: r(10px);
            height: r(10px);
            border-radius: 50%;
            background: rgb(183, 183, 183);
            margin-right: r(12px);
        }
        .pannel .active {
            background: red;
            border-color: red;
        }
//结束
        .content_menu{
            padding-top: r(42px);
            width: r(585px);
            margin: 0 auto;
            .menu_wrap{
                position: relative;
                display: flex;
                justify-content: space-around;
                border-bottom: r(1px) solid #cecece;
                padding-bottom: r(30px);
                margin-bottom: r(40px);
                .left_menu{
                    width: r(208px);
                    height: r(140px);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .right_menu{
                    width: r(358px);
                    p{
                        line-height: r(26px);
                        font-size: 14px;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        &:nth-of-type(2){
                            margin-top: r(6px);
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            font-size: 12px;
                            color: #c5c5c5;
                        }
                    }
                    .text_menu_wrap{
                        font-size: 12px;
                        color: #939393;
                        margin-top: r(12px);
                        &>p{
                            display: inline-block;
                            vertical-align: middle;
                            font-size: 12px;
                            line-height: r(24px);
                            margin-right: r(18px);
                        }
                        .like{
                            display: inline-block;
                            vertical-align: middle;
                            margin-right: r(18px);
                        }
                        .browse{
                            display: inline-block;
                            vertical-align: middle;
                        }
                        &::after{
                            content: "";
                            clear: both;
                            display: block;
                        }
                    }
                }
            }
        }
        .load_wrap{
            width: r(585px);
            height: r(58px);
            text-align: center;
            line-height: r(58px);
//          border-top: 1px solid #e6e6e6;
            margin: 0 auto;
            h4{
                font-size: 14px;
                color: #c5c5c5;
            }
        }
    }
}